<template>
  <view 
    :class="['card', cardClass, `card--${variant}`]"
    :style="[cardStyle, customStyle]"
    @click="handleClick"
  >
    <!-- 卡片头部 -->
    <view v-if="showHeader || $slots.header" class="card-header">
      <slot name="header">
        <view v-if="title" class="card-title">
          <text class="title-text">{{ title }}</text>
          <text v-if="subtitle" class="subtitle-text">{{ subtitle }}</text>
        </view>
        <view v-if="showAction" class="card-action">
          <slot name="action">
            <text class="action-text">{{ actionText }}</text>
            <text class="iconfont-v2 icon-jiantouyou action-icon"></text>
          </slot>
        </view>
      </slot>
    </view>

    <!-- 卡片内容 -->
    <view class="card-content">
      <slot>
        <text v-if="content" class="card-text">{{ content }}</text>
      </slot>
    </view>

    <!-- 卡片底部 -->
    <view v-if="showFooter || $slots.footer" class="card-footer">
      <slot name="footer">
        <view v-if="footerText" class="footer-text">{{ footerText }}</view>
      </slot>
    </view>
  </view>
</template>

<script>
/**
 * 通用卡片组件
 * @description 通用的卡片容器组件，支持多种样式变体和自定义内容
 * @author 系统
 * @date 2024
 */

export default {
  name: 'Card',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 底部文本
    footerText: {
      type: String,
      default: ''
    },
    // 操作文本
    actionText: {
      type: String,
      default: '更多'
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: false
    },
    // 是否显示底部
    showFooter: {
      type: Boolean,
      default: false
    },
    // 是否显示操作按钮
    showAction: {
      type: Boolean,
      default: false
    },
    // 卡片变体: 'default' | 'bordered' | 'shadow' | 'flat' | 'outlined'
    variant: {
      type: String,
      default: 'default',
      validator: value => ['default', 'bordered', 'shadow', 'flat', 'outlined'].includes(value)
    },
    // 卡片大小: 'small' | 'medium' | 'large'
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    // 是否可点击
    clickable: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 自定义类名
    cardClass: {
      type: String,
      default: ''
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 内边距
    padding: {
      type: String,
      default: ''
    },
    // 外边距
    margin: {
      type: String,
      default: ''
    }
  },
  computed: {
    cardStyle() {
      const style = {}
      
      if (this.padding) {
        style.padding = this.padding
      }
      
      if (this.margin) {
        style.margin = this.margin
      }
      
      return style
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) return
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: white;
  border-radius: 24rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;

  // 默认样式
  &--default {
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }

  // 边框样式
  &--bordered {
    border: 2rpx solid #e5e5e5;
    box-shadow: none;
  }

  // 阴影样式
  &--shadow {
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
  }

  // 扁平样式
  &--flat {
    box-shadow: none;
    border: none;
  }

  // 轮廓样式
  &--outlined {
    border: 2rpx solid #ED6567;
    box-shadow: none;
  }

  // 大小变体
  &--small {
    padding: 20rpx;
    border-radius: 16rpx;
  }

  &--medium {
    padding: 30rpx;
    border-radius: 24rpx;
  }

  &--large {
    padding: 40rpx;
    border-radius: 32rpx;
  }

  // 可点击状态
  &.clickable {
    cursor: pointer;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }

    &:active {
      transform: translateY(-2rpx);
    }
  }

  // 禁用状态
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  // 卡片头部
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .card-title {
      flex: 1;

      .title-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }

      .subtitle-text {
        font-size: 24rpx;
        color: #666;
        display: block;
      }
    }

    .card-action {
      display: flex;
      align-items: center;
      color: #ED6567;
      cursor: pointer;

      .action-text {
        font-size: 26rpx;
        margin-right: 8rpx;
      }

      .action-icon {
        font-size: 24rpx;
        transition: transform 0.3s ease;
      }

      &:hover .action-icon {
        transform: translateX(4rpx);
      }
    }
  }

  // 卡片内容
  .card-content {
    .card-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  // 卡片底部
  .card-footer {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #f5f5f5;

    .footer-text {
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
  }
}

// 特殊用途的卡片样式
.card {
  // 信息卡片
  &--info {
    border-left: 8rpx solid #ED6567;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  }

  // 警告卡片
  &--warning {
    border-left: 8rpx solid #ff9500;
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%);
  }

  // 成功卡片
  &--success {
    border-left: 8rpx solid #52c41a;
    background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
  }

  // 错误卡片
  &--error {
    border-left: 8rpx solid #ff4d4f;
    background: linear-gradient(135deg, #fff2f0 0%, #ffffff 100%);
  }

  // 加载状态
  &--loading {
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      animation: loading 1.5s infinite;
    }
  }
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
</style>
